<template>
  <div >
    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
    <!-- 阿里云视频播放器脚本 -->
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />
    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />

<!--    <div class="mt50 commentHtml"><div>-->
<!--      <h6 class="c-c-content c-infor-title" id="i-art-comment">-->
<!--        <span class="commentTitle">视频评论</span>-->
<!--      </h6>-->
<!--      <section class="lh-bj-list pr mt20 replyhtml">-->
<!--        <ul>-->
<!--          <li class="unBr">-->
<!--            <aside class="noter-pic">-->
<!--              <img width="50" height="50" class="picImg" src="~/assets/img/avatar-boy.gif">-->
<!--            </aside>-->
<!--            <div class="of">-->
<!--              <section class="n-reply-wrap">-->
<!--                <fieldset>-->
<!--                  <textarea name="" v-model="comment.content" placeholder="输入您要评论的文字" id="commentContent"></textarea>-->
<!--                </fieldset>-->
<!--                <p class="of mt5 tar pl10 pr10">-->
<!--                  <span class="fl "><tt class="c-red commentContentmeg" style="display: none;"></tt></span>-->
<!--                  <input type="button" @click="addComment()" value="回复" class="lh-reply-btn">-->
<!--                </p>-->
<!--              </section>-->
<!--            </div>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </section>-->
<!--      <section class="">-->
<!--        <section class="question-list lh-bj-list pr">-->
<!--          <ul class="pr10">-->
<!--            <li v-for="(comment,index) in data.items" v-bind:key="index">-->
<!--              <aside class="noter-pic">-->
<!--                <img width="50" height="50" class="picImg" :src="comment.avatar">-->
<!--              </aside>-->
<!--              <div class="of">-->
<!--                      <span class="fl">-->
<!--                      <font class="fsize12 c-blue">-->
<!--                        {{comment.nickname}}</font>-->
<!--                      <font class="fsize12 c-999 ml5">评论：</font></span>-->
<!--              </div>-->
<!--              <div class="noter-txt mt5">-->
<!--                <p>{{comment.content}}</p>-->
<!--              </div>-->
<!--              <div class="of mt5">-->
<!--                <span class="fr"><font class="fsize12 c-999 ml5">{{comment.gmtCreate}}</font></span>-->
<!--              </div>-->
<!--            </li>-->

<!--          </ul>-->
<!--        </section>-->
<!--      </section>-->

<!--      &lt;!&ndash; 公共分页 开始 &ndash;&gt;-->
<!--        <div class="block">-->
<!--          <span class="demonstration"></span>-->
<!--          <el-pagination-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--            :current-page="pageNum"-->
<!--            :page-sizes="[4, 8, 12, 20]"-->
<!--            :page-size="pageSize"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            :total="data.total">-->
<!--          </el-pagination>-->
<!--        </div>-->
<!--      &lt;!&ndash; 公共分页 结束 &ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>
<script>
  import course from '@/api/teacher'
  import comment from '@/api/common'
  import vod from '@/api/video'
  export default {
    layout: 'video',//应用video布局
    asyncData({ params, error }) {
      return  vod.getVideoPlayer(params.video).then(response => {
        return {
          address: response.data.data.video.videoSourceId,
          // courseId:params.id
        }
      })
    },
    // data () {
    //   return {
    //     data:{},
    //     total: 0,
    //     pageNum: 1,
    //     pageSize: 8,
    //     comment:{
    //       content:'',
    //       courseId:''
    //     },
    //     courseInfo:{},
    //     chapterVideoList:[],
    //   }
    // },
    // created() {
    //   this.initCourseInfo()
    //   this.initComment()
    // },
    mounted() {
      new Aliplayer({
        id: 'J_prismPlayer',
        cover: 'https://img14.360buyimg.com/ddimg/jfs/t1/146069/9/10521/54253/5f831bb2Ef3992c15/2b6baff2a41c6e69.jpg',
        source: this.address,
        encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
        "width": "70%",
        "height": "1000px",
        "autoplay": false,
        "isLive": false,
        "rePlay": false,
        "playsinline": true,
        "preload": true,
        "qualitySort": 'asc',
        "controlBarVisibility": "hover",
        "useH5Prism": true,
        "skinLayout": [
          {
            "name": "bigPlayButton",
            "align": "blabs",
            "x": 30,
            "y": 80
          },
          {
            "name": "H5Loading",
            "align": "cc"
          },
          {
            "name": "errorDisplay",
            "align": "tlabs",
            "x": 0,
            "y": 0
          },
          {
            "name": "infoDisplay"
          },
          {
            "name": "tooltip",
            "align": "blabs",
            "x": 0,
            "y": 56
          },
          {
            "name": "thumbnail"
          },
          {
            "name": "controlBar",
            "align": "blabs",
            "x": 0,
            "y": 0,
            "children": [
              {
                "name": "progress",
                "align": "blabs",
                "x": 0,
                "y": 44
              },
              {
                "name": "playButton",
                "align": "tl",
                "x": 15,
                "y": 12
              },
              {
                "name": "timeDisplay",
                "align": "tl",
                "x": 10,
                "y": 7
              },
              {
                "name": "fullScreenButton",
                "align": "tr",
                "x": 10,
                "y": 12
              },
              {
                "name": "subtitle",
                "align": "tr",
                "x": 15,
                "y": 12
              },
              {
                "name": "setting",
                "align": "tr",
                "x": 15,
                "y": 12
              },
              {
                "name": "volume",
                "align": "tr",
                "x": 5,
                "y": 10
              }
            ]
          }
        ]
      }, function(player) {
        console.log('播放器创建成功')
      })
    },
    // methods:{
    //   handleSizeChange(size) {
    //     this.pageSize = size
    //       course.getCourseList(this.pageNum, this.pageSize, this.searchObj).then(response => {
    //         this.data = response.data.data
    //       })
    //   },
    //   handleCurrentChange(num) {
    //     this.pageNum = num
    //       course.getCourseList(this.pageNum, this.pageSize, this.searchObj).then(response => {
    //         this.data = response.data.data
    //       })
    //   },
    // },
    // initCourseInfo() {
    //   course.getCourseInfo(this.courseId)
    //     .then(response => {
    //       this.courseInfo=response.data.data.courseInfo
    //       this.chapterVideoList=response.data.data.list
    //     })
    // },
    // initComment() {
    //   comment.getPageList(this.pageNum, this.pageSize, this.courseId).then(response => {
    //     this.data = response.data.data
    //   })
    // },
    // addComment(){
    //   this.comment.courseId = this.courseId
    //   this.comment.teacherId = this.courseInfo.teacherId
    //   comment.addComment(this.comment).then(response => {
    //     if(response.data.success){
    //       this.comment.content = ''
    //       this.initComment()
    //     }
    //   })
    // },
  }
</script>
<style>
  .prism-player{
    margin: auto;
  }
</style>

